<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10-千千音乐盒实现全选反选,练习</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">

	*{
		margin: 0;
		padding: 0;
	}

	#panel{
		margin: 0 15%;
		border:1px solid black;
	}
	
	h3{
		text-align: center;
		border-bottom: 1px solid black;
	}
	input{
		width: 20px;
		height: 20px;
		line-height: 20px;
		margin-bottom: 5px;
		margin-left: 35px;
	}

	b{
		margin-left: 5px;
	}
	
	button{
		width: 80px;
		height: 40px;
		margin: 5px 10px;
	}



</style>
</head>
<body>
	

	<div id="panel">
		<h3 id="h-three">千千音乐盒</h3><br>
		<input type="checkbox" id="check"><b>陈小春--献世</b><br>
		<input type="checkbox"><b>陈小春--献世</b><br>
		<input type="checkbox"><b>陈小春--献世</b><br>
		<input type="checkbox"><b>陈小春--献世</b><br>
		<input type="checkbox"><b>陈小春--献世</b><br>
		
<br><hr><hr><br>
		<button id="allSelect">全选</button>
		<button id="cancelSelect">全不选</button>
		<button id="reverseSelect">反选</button>

	</div>



<script type="text/javascript">

	function $(id){
		return typeof id=== 'string'?document.getElementById(id):null;
	}
//1.获取复选框
	var inputs=document.getElementsByTagName('input')


//2.全选
	
	$('allSelect').onclick = function(){
		for(var i=0; i<inputs.length; i++){
			inputs[i].checked = true
		}
	}


//3. 全不选
	$('cancelSelect').onclick = function(){
		for(var i=0; i<inputs.length; i++){
			inputs[i].checked = false
		}
	}



//4. 反选
	
	$('reverseSelect').onclick = function(){

		for(var i=0; i<inputs.length; i++){
			inputs[i].checked = !inputs[i].checked
		}
		
	}


</script>



</body>
</html>